<template>
  <el-breadcrumb
    class="app-breadcrumb"
    :replace="true"
    separator="/"
  >
    <transition-group name="breadcrumb">
      <el-breadcrumb-item
        v-for="(item,index) in levelList"
        :key="item.path"
      >
        <span
          v-if="item.redirect==='noRedirect'||index==levelList.length-1"
          class="no-redirect"
        >{{ item.meta.title }}</span>
        <a
          v-else
          @click.prevent="handleLink(item)"
        >{{ item.meta.title }}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
import pathToRegexp from 'path-to-regexp';
import Vue from 'vue';
import {Breadcrumb, BreadcrumbItem} from "element-ui";

Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
/**
 * 面包屑组件
 * @author maolin
 */
export default {
  data () {
    return {
      levelList: null
    };
  },
  watch: {
    $route (route) {
      // if you go to the redirect page, do not update the breadcrumbs
      if (route.path.startsWith('/redirect/')) {
        return;
      }
      this.getBreadcrumb();
    }
  },
  created () {
    this.getBreadcrumb();
  },
  methods: {
    /**
     * 通过路由获取面包屑
     * @public
     */
    getBreadcrumb () {
      // only show routes with meta.title
      let matched = this.$route.matched.filter(item => item.meta && item.meta.title);
      const first = matched[0];

      if (!this.isDashboard(first)) {
        matched = [
          {path: '/', meta: { title: '工作台' }}].concat(matched);
      }

      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false);
    },
    /**
     * 判断路由是否为首页
     * @param {object} route 路由对象
     * @private
     */
    isDashboard (route) {
      const name = route && route.name;
      if (!name) {
        return false;
      }
      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase();
    },
    /**
     * 快速填充 url 字符串的参数值。
     * ```js
     * var pathToRegexp = require('path-to-regexp')
       var url = '/user/:id/:name'
       var data = {id: 10001, name: 'bob'}
       console.log(pathToRegexp.compile(url)(data))
       // /user/10001/bob
     * ```
     * @param {object} path 路径
     * @private
     */
    pathCompile (path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const { params } = this.$route;
      let toPath = pathToRegexp.compile(path);
      return toPath(params);
    },
    /**
     * 跳转到指定路径
     * @param {object} item 配置的路由对象
     * @public
     */
    handleLink (item) {
      const { redirect, path } = item;
      if (redirect) {
        this.$router.push(redirect);
        return;
      }
      this.$router.push(this.pathCompile(path));
    }
  }
};
</script>

<style lang="scss" scoped>
  .app-breadcrumb.el-breadcrumb {
    display: inline-block;
    font-size: 14px;
    line-height: 30px;
    .no-redirect {
      color: #97a8be;
      cursor: text;
    }
  }
</style>
